<template>
	<view class="container">
		<scroll-view scroll-y="true" class="con">
			<view class="list">
				<view class="list-item" v-for="(item,index) in list" :key="item.id" @click="open(item.device_item_id,item.item_code)">
					<text>{{item.item_code}}</text>
					<view>
						<text v-if="item.use_state == 1" class="blue">{{item.use_state_text}}</text>
						<text v-if="item.use_state == 0" class="red">{{item.use_state_text}}</text>
						<image src="/static/img/detail/right.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="mask" v-if="isMask">
			<view class="content">
				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>
				<view class="tit">
					{{dataInfo.name}}使用信息
				</view>
				<view class="list">
					<view class="list-item">
						<text>使用人</text>
						<text v-if="dataInfo.nickname">{{dataInfo.nickname}}</text>
						<text v-else>暂无</text>
					</view>
					<view class="list-item">
						<text>电话</text>
						<text v-if="dataInfo.mobile">{{dataInfo.mobile}}</text>
						<text v-else>暂无</text>
					</view>
					<view class="list-item">
						<text>电池状态</text>
						<text v-if="dataInfo.use_state == 1">忙碌</text>
						<text v-if="dataInfo.use_state == 0">在线</text>
					</view>
					<view class="list-item">
						<text>使用人次</text>
						<text>{{dataInfo.use_num}}</text>
					</view>
					<view class="list-item">
						<text>使用时长</text>
						<text>{{dataInfo.use_length}}</text>
					</view>
				</view>
			</view>
		</view>
				
	</view>
	
</template>

<script>
	import {
		batteryDetail,
		batteryState
	} from '../../../api/api.js'
	export default {
		
		data() {
			return {
				isMask: false,
				device_id:'',
				list: [],
				
				dataInfo: {
					name:'',
					"nickname": "",
					"mobile": "",
					"use_state": "",
					"use_num": 0,
					"use_length": 0
				}
			}
		},
		onLoad(options) {
			this.device_id = options.device_id
			this.getInfo()
		},
		methods: {
			getInfo() {
				batteryDetail({
					device_id: this.device_id
				}).then(res => {
					console.log(res)
					this.list = res.data.list
				})
			},
			open(id,name) {
				this.isMask = true
				batteryState({
					device_item_id: id
				}).then(res=>{
					console.log(res)
					this.dataInfo = res.data
					this.dataInfo.name = name
				})
			},
			close(){
				this.isMask = false
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		position: relative;
	}
	
	
	.con{
		width: 100%;
		height: 100%;
	}

	.list {
		width: calc(100% - 60upx);
		padding: 0 30upx;
		background-color: #FFFFFF;

		.list-item {
			width: 100%;
			height: 100upx;
			border-bottom: 1upx solid #f4f4f4;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {}

			view {
				height: 100%;
				display: flex;
				align-items: center;

				.blue {
					color: #5bcfca;
				}

				.red {
					color: #e87e7d;
				}

				image {
					width: 15upx;
					margin-left: 15upx;
				}
			}
		}


	}


	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;

		.content {
			width: 560upx;
			height: 500upx;
			background-color: #FFFFFF;
			border-radius: 12upx;
			padding: 20px;

			image {
				width: 30upx;
			}

			.tit {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				margin-bottom: 10upx;
				font-weight: bold;
			}

			.list {

				.list-item {
					height: 80upx;
					border-bottom: none;
				}
			}

		}
	}
</style>
